/*需求图的绘制
 * @Author: your name
 * @Date: 2021-12-12 22:06:25
 * @LastEditTime: 2022-05-25 17:16:38
 * @LastEditors: lyztroy lyztroy@bupt.edu.cn
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: /visualNotes/src/components/Node/Object/index.tsx
 */
import React , { useState }from "react";
import  { Handle, Position } from "react-flow-renderer";
import { NodeProps} from "..";
import { useSelector } from "react-redux";
import EditMenu from "../EditMenu";
import { RootState } from "@/store";
import style from "./index.module.less";

const Model = (props: NodeProps) => {
  const { isConnectable = true, id } = props;
  const { flowData } = useSelector((state: RootState) => state.diagram);
  const currentNode = flowData?.get(id) || {};

  const [handleScale, setHandleScale] = useState(1);   
  
  const handleMouseEnter = () => {   
    setHandleScale(2);   
  };  
  
  const handleMouseLeave = () => {  
    setHandleScale(1);   
  }; 
  return (
    <div className={style.container}>
      <div className={style.main}>
        <span>《模型》</span>
        <div className={style.name} />  
        
          <div className={style.label}>{currentNode.label}</div>
          <div className={style.menu}>
          <EditMenu node={props}></EditMenu>
        </div>
          
      </div>

      <Handle
        type="target"
        position={Position.Left}
        onMouseEnter={handleMouseEnter}  
        onMouseLeave={handleMouseLeave} 
        style={{ borderRadius: 0, transform: `scale(${handleScale})` }} 
        id="left"
        isConnectable={isConnectable}
      />
      <Handle
        type="source"
        position={Position.Right}
        id="right"
        onMouseEnter={handleMouseEnter}  
        onMouseLeave={handleMouseLeave} 
        style={{ borderRadius: 0, transform: `scale(${handleScale})` }} 
        isConnectable={isConnectable}
      />
      <Handle
        type="target"
        position={Position.Top}
        id="bottom"
        onMouseEnter={handleMouseEnter}  
        onMouseLeave={handleMouseLeave} 
        style={{ borderRadius: 0, transform: `scale(${handleScale})` }} 
        isConnectable={isConnectable}
      />
      <Handle
        type="source"
        position={Position.Bottom}
        id="top"
        onMouseEnter={handleMouseEnter}  
        onMouseLeave={handleMouseLeave} 
        style={{ borderRadius: 0, transform: `scale(${handleScale})` }} 
        isConnectable={isConnectable}
      />
    </div>
  );
};

export default Model;
